
<template>
    <div>
        <CityHeader></CityHeader>
        <Search :cities = "cities"></Search>
        <List :cities = "cities" :hot= "hotCities" :letter = "letter"></List>
        <Alphabet :cities = "cities" @change = "handleLetterChange"></Alphabet>


    </div>
</template>

<script>
    import axios from "axios"
    import CityHeader from "./components/CityHeader"
    import Search from "./components/Search"
    import List from "./components/List"
    import Alphabet from "./components/Alphabet"
    export default {
        name : "City",
        data(){
            return{
                cities:{},
                hotCities:[],
                letter:"",
            }
        },
        components:{
             CityHeader,
             Search,
             List,
             Alphabet
        },
        methods:{
            getCityInfo(){
                axios.get("/api/city.json")
                .then(this.handleGetCityInfoSucc)
            },
            handleGetCityInfoSucc(res){
                res = res.data
                console.log(res.data);
                if (res.ret && res.data) {
                    const data = res.data
                    this.cities = data.cities
                    this.hotCities = data.hotCities    
                }
            },
            handleLetterChange(letter){
                console.log(letter)
                this.letter = letter
            }
        },
        mounted(){
            this.getCityInfo();
        }

    }
</script>

<style lang="stylus" scoped>

</style>